<template>
  <div>
    <h4>这个是父组件: {{ num }}</h4>
    <p ref="myP">{{ num }}</p>
    <hr>
    <Son ref="mySon" :aaa="num" />
    <button @click="hClick">add加1操作</button>
  </div>
</template>

<script>
import Son from './Son.vue'
export default {
  components: {
    Son
  },
  data() {
    return {
      num: 100
    }
  },

  methods: {
    hClick() {
      this.num++
      // dom的更新是异步的
      console.log(this.$refs.myP.innerHTML, 'this.$refs.myP.innerHTML')
      //  this.$nextTick保证dom更新完成之后的回调函数，才会执行函数里面的代码
      this.$nextTick(() => {
        console.log(this.$refs.myP.innerHTML, ' this.$nextTick')
        console.log(this.$refs.mySon.aaa, ' this.$refs.mySon$nextTick ')
      })
      // this.$refs.mySon获取到子组件的对象，就可以调用子组件中的方法（methods），或者获取属性props|| data函数中
      this.$refs.mySon.demo()
      console.log(this.$refs.mySon.aaa, ' this.$refs.mySon')

      setTimeout(() => {
        console.log(this.$refs.myP.innerHTML, ' setTimeout')
        console.log(this.$refs.mySon.aaa, ' this.$refs.mySonsetTimeout ')
      }, 0)
      // 微任务（Promise）----》 dom渲染——————》    宏任务 （Timeout、setInterval、事件 ） 等
    }
  }
}
</script>

<style>

</style>
